<template>
    <div class="detail">
        <header>
            <div class="detail-banner">
                <span>
                    <img src="~assets/img/car/notice.png" alt="">
                    <i>获奖用户：</i>
                </span>
                <div class="swiper-container">
                    <ul class="swiper-wrapper">
                        <li class="swiper-slide" v-for="notice in notices">
                            <p>
                                {{notice}}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <img :src="info.img" alt="">
        </header>
        <section>
            <h3 class="no-bold">
                奖品|{{info.title}}
                <span>
                    <i>{{info.integral}}</i>积分
                </span>
            </h3>
            <div>
                适用车型：{{info.type}}
            </div>
        </section>
        <section>
            <h3>
                商品简介
            </h3>
            <p>
                {{info.info}}
            </p>
        </section>
        <section>
            <h3>
                兑换流程
            </h3>
            <p v-html="info.receive">
                
            </p>
        </section>
        <section>
            <h3>
                注意事项
            </h3>
            <p v-html="config.attention">
                
            </p>
        </section>
        <section class="sec-button">
            <button class="vp-btn-blue" @click="confirm">
                立即兑换
            </button>
        </section>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        name:'detail',

        data() {
            return {
                list: [1,2,3,4,5,6],
                notices: [ ],
                info: {},
                config: {}
            }
        },

        methods: {
            confirm() {
                this.$iosConfirm({
                    title: `确定用${this.info.integral}积分兑换？`,
                    text: '兑换后您可到店领取',
                    cancelText: '取消',
                    okText: '确定'
                }).then(data => {
                    console.log(data);
                    //兑换奖品
                    this.axios.get('order_add', { params: {
                        id: localStorage.id,
                        sid: this.$route.query.id
                    } }).then(data => {
                        if (data.status == 200) {
                            this.$router.push('/home/main/detail/success?id=' + data.data);
                        } else {
                            this.$toast(data.msg);
                        }
                    })
                }).catch(() => {
                    console.log(false);
                }) 
            }
        },

        components:{
            
        },

        mounted() {
            let mySwiper = new Swiper('.swiper-container', {
                loop: true,
                pagination : '.swiper-pagination',
                autoplay: 1000,
                observer: true,
                observeParents: true
            });

            if (this.$route.query.id) {
                this.axios.get('shop_info', { params: {id: this.$route.query.id} }).then(data => {
                    if (data.status == 200) {
                        this.info = data.data;
                    } else {
                        this.$toast('服务器异常，请重试');
                    }
                })
            } else {
                this.$router.go(-1);
            }

            this.axios.get('integral_config').then(data => {
                if (data.status == 200) {
                    this.config = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })

            this.axios.get('order_notice').then(data => {
                if (data.status == 200) {
                    this.notices = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .detail-banner {
        padding: .2rem;
        background: #1E74DE;
        color: #fff;
        font-size: .24rem;
        .flex-between;
        span {
            .flex-left;
            img {
                width: .22rem;
                margin-right: .1rem;
                height: auto;
            }
        }
        img {
            width: 100%;
            height:4.15rem;
        }
    }
    .detail {
        min-height:100vh;
        background: #F0F0F0;
        padding-bottom: 1.1rem;
        header {
            > img {
                width: 100%;
                height: 3.3rem;
            }
        }
        section {
            padding: .36rem .33rem;
            background: #fff;
            margin-top: .23rem;
            h3 {
                font-size: .32rem;
                font-weight: bold;
                margin-bottom: .3rem;
                .flex-between;
                align-items: flex-end;
                span {
                    color: @blue;
                    i {
                        font-size: .5rem;
                    }
                }
            }
            div {
                font-size: .28rem;
                color: #A5A5A5;
            }
            p {
                font-size: .26rem;
                color: #6F6F6F;
                line-height: .4rem;
            }
            .no-bold {
                font-weight: normal;
            }
        }
        .sec-button {
            position: fixed;
            bottom: 0;
            width: 100%;
            .box-sizing;
            background: #fff;
            padding: .15rem .33rem;
            font-size: .32rem;
            .vp-btn-blue {
                width: 100%;
                background: #1E74DE;
                color: #fff;
                height: .75rem;
                font-size: .32rem;
                .bor(5px);
            }
        }
    }
</style>
<style lang="less" rel="stylesheet/less" type="text/css">
    .detail {
        .swiper-container {
            width: 60%;
        }
        .swiper-pagination-bullet{
            background: rgba(255,255,255,1);
        }
        .swiper-pagination-bullet-active {
            background: #35539E;
        }
    }
    .ios-alertview {
        width: 5.4rem;
        border-radius: 50px;
        .ios-alertview-title {
            font-size: .34rem;
        }
        .ios-alertview-text {
            font-size: .26rem;
        }
        .ios-alertview-buttons-horizontal {
            height: .88rem;
        }
        .ios-alertview-button {
            font-size: .34rem;
            height: .88rem;
            line-height: .88rem;
        }
        .ios-alertview-buttons {
            :first-child {
                color:#3A3A3A;
            }
        }
    }
</style>